import React from 'react';
import { Button, Form, Input, message, Table, Modal } from 'antd';
import { connect } from 'dva';
import {
	getTicketList, postTicketDel, postTicketUpOrDown,
	postProcessDefinitionList, getWoTemplateListByVersionId,
} from '@/services/geographic';
import EditTicket from './edit';
const { confirm } = Modal;
class TicketList extends React.Component {
	constructor(props) {
		super(props);
		this.state = {
			list: [],
			total: 0,
			query: {
				search: '',
				current: 1,
				size: 10,
			},
			loading: false,
		};
	}

	componentDidMount() {
		if (this.props.onRef) {
			this.props.onRef(this);
		};
		// this.getTicketList();
	}

	getTicketList = async () => {
		this.setState({ loading: true });
		const { query } = this.state;
		const { applicationId, currentUser } = this.props;
		let res = await getTicketList({ ...query, applicationId });
		let list = res.records;
		let resModule = await postProcessDefinitionList({
			tenantId: currentUser.kfTenantId,
			createChannel: 'customer',
		});
		res.records.forEach(async (item, index) => {
			let resTemplate = await getWoTemplateListByVersionId({
				templateVersionIds: item.orderModuleId,
			});
			let data = resModule.filter(text => item.userFlowModuleKey == text.key);
			list[index]['orderModuleName'] = resTemplate && resTemplate.length > 0 ? resTemplate[0].name : null;
			list[index]['userFlowModuleName'] = data && data.length > 0 ? data[0].name : null;
		});
		setTimeout(() => {
			this.setState({ loading: false, total: res.total, list })
		}, 500)
	}

	queryBage = () => {
		const { form } = this.props;
		let userInfo = form.getFieldsValue();
		let { query } = this.state;
		query.current = 1;
		query.search = userInfo.query;
		this.setState({ query }, () => this.getTicketList());
	}

	changePage = (page, size) => {
		let { query } = this.state;
		query.current = page;
		query.size = size;
		this.setState({ query }, () => this.getTicketList());
	}

	addTicket = () => {
		const { applicationId } = this.props;
		if (this.EditTicket) {
			this.EditTicket.initOpen(null, applicationId)
		}
	}

	editTicket = data => {
		const { applicationId } = this.props;
		if (this.EditTicket) {
			this.EditTicket.initOpen(data, applicationId)
		}
	}

	delTicket = data => {
		confirm({
			title: "确定要删除该工单配置吗？",
			okText: "确认",
			cancelText: "取消",
			onOk: async () => {
				let res = await postTicketDel({ id: data.id });
				console.log(res);
				this.getTicketList();
			},
			onCancel() {},
		});
	}

	downTicket = async data => {
		let res = await postTicketUpOrDown({ id: data.id, action: 'up' });
		console.log(res);
		this.getTicketList();
	}

	upTicket = async data => {
		let res = await postTicketUpOrDown({ id: data.id, action: 'down' });
		console.log(data);
		this.getTicketList();
	}

	topTicket = async data => {
		let res = await postTicketUpOrDown({ id: data.id, action: 'top' });
		console.log(data);
		this.getTicketList();
	}

	render() {
		const { list, total, query, loading } = this.state;
		const { getFieldDecorator } = this.props.form;
		const { robotId } = this.props;
		const columns = [
			{
				title: '工单名称',
				dataIndex: 'name',
				key: 'name',
				width: 150,
				align: 'center',
			},
			{
				title: '图片',
				dataIndex: 'imagePath',
				key: 'imagePath',
				width: 150,
				align: 'center',
				render: text => {
					return <img src={text} style={{ maxWidth: '40px', maxHeight: '40px' }} />
				}
			},
			{
				title: '用户流程模型',
				dataIndex: 'userFlowModuleName',
				key: 'userFlowModuleName',
				align: 'center',
				width: 160,
			},
			{
				title: '对应工单模板',
				dataIndex: 'orderModuleName',
				key: 'orderModuleName',
				align: 'center',
				width: 160,
			},
			{
				title: '操作',
				align: 'center',
				width: 300,
				render: (text, row, index) => {
					return (
						<>
							<Button
								type="primary"
								style={{ marginRight: 4 }}
								onClick={() => this.editTicket(row)}
                size="small"
                icon='edit'
							>
								编辑
							</Button>
							<Button
								type="danger"
								style={{ marginRight: 4 }}
								onClick={() => this.delTicket(row)}
                icon="delete"
                size="small"
							>
								删除
							</Button>
							<Button
								style={{ marginRight: 4 ,background:query.current == 1 && index == 0 ? '#BFBFBF' : '#556FB5',color:"#ffffff"}}
								onClick={() => this.downTicket(row)}
								disabled={query.current == 1 && index == 0}
                icon="arrow-up"
                size="small"
							>
								上移
							</Button>
							<Button
                style={{ marginRight: 4 ,background:((query.current-1)*query.size + index + 1) == total ? '#BFBFBF' : '#8395FB',color:"#ffffff"}}
								onClick={() => this.upTicket(row)}
								disabled={((query.current-1)*query.size + index + 1) == total}
                icon="arrow-down"
                size="small"
							>
								下移
							</Button>
							<Button
                style={{ background:query.current == 1 && index == 0 ? '#BFBFBF' : '#00B0FF',color:"#ffffff"}}
								onClick={() => this.topTicket(row)}
								disabled={query.current == 1 && index == 0}
                icon="vertical-align-top"
                size="small"
							>
								置顶
							</Button>
						</>
					);
				},
			},
		];

		return (
			<div>
				<div style={{ marginBottom: 16, display: 'flex', justifyContent: 'space-between' }}>
          <span style={{ lineHeight: '40px' }}>
						<Button type="primary" onClick={this.addTicket}>添加</Button>
					</span>
					<Form layout="inline">
						<Form.Item>
							{getFieldDecorator('query')(<Input placeholder='请输入工单关键词' />)}
						</Form.Item>
						<Form.Item>
							<Button type="primary" onClick={this.queryBage}>查询</Button>
						</Form.Item>
					</Form>
					
				</div>
				<Table
					rowKey={'id'}
					columns={columns}
					dataSource={list}
					loading={loading}
					scroll={{ x: '1000px' }}
					pagination={{
						total,
						current: query.current,
						onChange: this.changePage,
						showQuickJumper: true,
						showSizeChanger: true,
						onShowSizeChange: this.changePage
					}}
				/>
				<EditTicket onRef={ref => this.EditTicket = ref} getTicketList={this.getTicketList} />
			</div>
		);
	}
}

export default connect(({ user }) => ({
	currentUser: user.currentUser,
}))(Form.create()(TicketList));
